<template>
	<scroll-view class="page" scroll-y="true" @scrolltolower="loadDataFn">
		<xzfx-empty v-if="list.length === 0" tips="暂无车辆" />
		<view class="xzfx-car-item" v-for="(item,index) in list" :key="index" @click.stop="$go('/pages/car-auction/details?id=' + item.id)">
			<image :src="item.photos.split(',')[0]" mode=""></image>
			<view class="car-title">
				{{ item.truckBrand }}
				{{ item.truckType }}
			</view>
			<view class="car-parmas">
				<view class="car-parmas-item">{{ item.maxPower }}匹</view>
				<view class="car-parmas-item">{{ item.fuelType }}</view>
				<view class="car-parmas-item">{{ item.emissionStandard }}</view>
			</view>
			<view class="car-action">
				<view class="car-price">
					<text>低价:</text>{{ item.basePrice }}<text>万元</text>
				</view>
				<!-- <view class="car-price">
					<text>最高竞价:</text>
					12.34
					<text>万</text>
				</view> --> 
				<view class="btn">立即竞拍</view>
			</view>
		</view>
		<xzfx-divider v-if="list.length > 10">{{ dividerTitle }}</xzfx-divider>
		<view class="action">
			<view class="btn" @click.stop="$checkLogin(goRecord)">我的出价记录</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				list: [],
				pageNo: 1,
				pageSize: 10,
				dividerTitle: "暂无更多"
			};
		},
		onShow() {
			this.refreshData()
		},
		onPullDownRefresh(){
			this.refreshData()
		},
		methods: {
			goRecord(){
				this.$go('/pages/car-auction/record')
			},
			refreshData(){
				this.pageNo = 1;
				this.pageSize = 10;
				this.total = 0;
				this.list = [];
				this.getDataFn()
			},
			loadDataFn(){
				if(this.total > this.list.length){
					this.pageNo = this.pageNo + 1
					this.getDataFn()
				}else{
					this.dividerTitle = "暂无更多"
				}
			},
			getDataFn(){
				this.$utils.system.loading("加载中，请稍后");
				this.dividerTitle = "加载中......"
				this.$apis.carAuction.getList({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					console.log(res)
					this.dividerTitle = "暂无更多"
					this.total = res.total
					this.list = this.list.concat(res.items)
				}).catch(err => {
					console.log(err)
					this.dividerTitle = "暂无更多";
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		height: 100vh;
		padding-bottom: 120rpx;
		.xzfx-car-item{
			background-color: #fff;
			margin: $xzfx-spacing;
			border-radius: 20rpx;
			overflow: hidden;
			padding: $xzfx-spacing;
			image{
				width: 100%;
				height: 260rpx;
				display: block;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
			.car-title{
				margin-top: 25rpx;
				font-size: 32rpx;
				line-height: 36rpx;
				font-weight: bold;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.car-parmas{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				.car-parmas-item{
					font-size: 28rpx;
					color: #999999;
					margin-right: $xzfx-spacing;
				}
			}
			.car-action{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.car-price{
					height: 46rpx;
					font-size: 42rpx;
					font-weight: bold;
					color: red;
					text:first-child{
						font-size: 28rpx;
						margin-right: 8rpx;
						color: #666666;
						font-weight: 400;
					}
					text:last-child{
						font-size: 28rpx;
						margin-left: 6rpx;
					}
				}
				.btn{
					padding: 0 40rpx;
					height: 70rpx;
					border-radius: 35rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $xzfx-theme;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
		.action{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 $xzfx-spacing;
			border-top: 1rpx solid #f1f1f1;
			.btn{
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				color: #fff;
				background-color: $xzfx-theme;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
